<template>
    <div class="container-content">
        <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="medium"
            label-width="100px"
        >
            <el-form-item
                label="类型"
                prop="kingBaseReceiptConditionEntity.type"
            >
                <el-radio-group
                    v-model="formData.kingBaseReceiptConditionEntity.type"
                    size="medium"
                >
                    <el-radio
                        v-for="(item, index) in typeOptions"
                        :key="index"
                        :label="item.value"
                        :disabled="item.disabled"
                        border
                        >{{ item.label }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item
                label="编码"
                prop="kingBaseReceiptConditionEntity.conditionCode"
            >
                <el-input
                    v-model="
                        formData.kingBaseReceiptConditionEntity.conditionCode
                    "
                    placeholder="请输入编码"
                    clearable
                    :style="{ width: '100%' }"
                >
                </el-input>
            </el-form-item>
            <el-form-item
                label="名称"
                prop="kingBaseReceiptConditionEntity.title"
            >
                <el-input
                    v-model="formData.kingBaseReceiptConditionEntity.title"
                    placeholder="请输入名称"
                    clearable
                    :style="{ width: '100%' }"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="所属公司"
                prop="kingBaseReceiptConditionEntity.deptId"
            >
                <el-input
                    v-model="formData.kingBaseReceiptConditionEntity.deptId"
                    placeholder="请输入所属公司"
                    clearable
                    :style="{ width: '100%' }"
                >
                </el-input>
            </el-form-item>
            <el-form-item
                label="收款方式"
                prop="kingBaseReceiptConditionEntity.receiptType"
            >
                <el-select
                    v-model="
                        formData.kingBaseReceiptConditionEntity.receiptType
                    "
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                >
                    <el-option
                        v-for="(item, index) in receiptTypeOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label-width="120px"
                label="到期日计算日期"
                prop="kingBaseReceiptConditionEntity.dueTime"
            >
                <el-select
                    v-model="formData.kingBaseReceiptConditionEntity.dueTime"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                >
                    <el-option
                        v-for="(item, index) in dueTimeOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label-width="140px"
                label="多到期日设置标准"
                prop="kingBaseReceiptConditionEntity.dueSetStandard"
            >
                <el-select
                    v-model="
                        formData.kingBaseReceiptConditionEntity.dueSetStandard
                    "
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                >
                    <el-option
                        v-for="(item, index) in dueSetStandardOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="描述"
                prop="kingBaseReceiptConditionEntity.conditionDesc"
            >
                <el-input
                    v-model="
                        formData.kingBaseReceiptConditionEntity.conditionDesc
                    "
                    type="textarea"
                    placeholder="请输入描述"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                ></el-input>
            </el-form-item>
            <div class="desc-title"></div>
            <el-table
                :data="formData.kingBaseReceiptConditionDetailEntities"
                style="width: 100%"
                highlight-current-row
                border
            >
                <template #empty>
                    <el-button plain type="primary" round @click="addNewRow"
                        >添加新行
                    </el-button>
                </template>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleDataAdd(scope.$index, scope.row)"
                        ></el-button>
                        <el-button
                            plain
                            icon="el-icon-minus"
                            size="mini"
                            @click="handleDataDelete(scope.$index, scope.row)"
                        ></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="所属公司">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="kingBaseReceiptConditionDetailEntities.deptId"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input v-model="scope.row.deptId"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="收款比例%">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="kingBaseReceiptConditionDetailEntities.ratio"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input v-model="scope.row.ratio"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="收款条件">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="kingBaseReceiptConditionDetailEntities.receiptConditionId"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input
                                v-model="scope.row.receiptConditionId"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column
                    label="回显到应收单/应付单收款计划的到期日"
                    width="250"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            prop="kingBaseReceiptConditionDetailEntities.dueTime"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-date-picker
                                v-model="scope.row.dueTime"
                                type="date"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="到期日确定方式">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="kingBaseReceiptConditionDetailEntities.dueType"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-select
                                v-model="scope.row.dueType"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in dueTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="到期日确定方式描述">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="kingBaseReceiptConditionDetailEntities.deuDesc"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input
                                :disabled="scope.row.dueType !== 2"
                                v-model="scope.row.deuDesc"
                                placeholder="m=1;d=1"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="是否预收">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="kingBaseReceiptConditionDetailEntities.isPreReceipt"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-radio
                                v-model="scope.row.isPreReceipt"
                                :label="1"
                                >是</el-radio
                            >
                            <el-radio
                                v-model="scope.row.isPreReceipt"
                                :label="2"
                                >否</el-radio
                            >
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</template>
<script>
import { add } from "@/api/base/data";
import { updataKingBaseReceiptConditionList,editKingBaseReceiptConditionList } from "@/api/bim/outher";

export default {
    components: {},
     props: ["id"],
    data() {
        return {
            flag:false,
            formData: {
                kingBaseReceiptConditionEntity: {
                    type: "",
                    conditionCode: "",
                    title: "",
                    deptId: "",
                    receiptType: "",
                    dueTime: "",
                    dueSetStandard: "",
                    conditionDesc: "",
                },
                kingBaseReceiptConditionDetailEntities: [],
            },
            obj: {
                createBy: "",
                createTime: "",
                deptId: "",
                deuDesc: "",
                dueTime: "",
                dueType: "",
                id: "",
                isPreReceipt: "",
                isUsed: "",
                params: {},
                ratio: "",
                receiptConditionId: "",
                remark: "",
                searchValue: "",
                updateBy: "",
                updateTime: "",
            },
            rules: {
                kingBaseReceiptConditionEntity: {
                    type: [
                        {
                            required: true,
                            message: "请选择类型",
                            trigger: "change",
                        },
                    ],
                    conditionCode: [],
                    title: [
                        {
                            required: true,
                            message: "请输入名称",
                            trigger: "blur",
                        },
                    ],
                    deptId: [
                        {
                            required: true,
                            message: "请输入所属公司",
                            trigger: "blur",
                        },
                    ],
                    receiptType: [
                        {
                            required: true,
                            message: "请选择",
                            trigger: "change",
                        },
                    ],
                    dueTime: [
                        {
                            required: true,
                            message: "请选择",
                            trigger: "change",
                        },
                    ],
                    dueSetStandard: [
                        {
                            required: true,
                            message: "请选择",
                            trigger: "change",
                        },
                    ],
                    conditionDesc: [],
                },
            },
            typeOptions: [
                {
                    label: "收款条件",
                    value: 1,
                },
                {
                    label: "付款条件",
                    value: 2,
                },
            ],
            receiptTypeOptions: [
                {
                    label: "按到期日收款",
                    value: 1,
                },
                {
                    label: "按订单收款",
                    value: 2,
                },
                {
                    label: "按物料明细收款",
                    value: 3,
                },
            ],
            dueTimeOptions: [
                {
                    label: "订单日期",
                    value: 1,
                },
                {
                    label: "应收单业务日期",
                    value: 2,
                },
                {
                    label: "出库日期",
                    value: 3,
                },
            ],
            dueSetStandardOptions: [
                {
                    label: "按比例",
                    value: 1,
                },
                {
                    label: "按金额",
                    value: 2,
                },
            ],
            dueTypeOptions: [
                {
                    label: "交易日=应收单/应付单的到期日值",
                    value: 1,
                },
                {
                    label: "X天后=《月数 = 1;天数 = 1;》通过月和日值加上到期日值",
                    value: 2,
                },
            ],
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
          if (this.id!='') {
            updataKingBaseReceiptConditionList(this.id).then(res=>{
                this.formData=res.data
                this.flag=true
            })
        }
    },
    methods: {
        submitForm(cb) {
            if (this.flag) {
                this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
                editKingBaseReceiptConditionList(this.formData, "KingBaseReceiptCondition").then((res) => {
                    if (res.code === 200) {
                        cb();
                        this.$message.success("修改成功");
                        this.flag=false
                    }
                });
            });
            }else{
                this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
                add(this.formData, "KingBaseReceiptCondition").then((res) => {
                    if (res.code === 200) {
                        cb();
                        this.$message.success("新增成功");
                    }
                });
            });
            }
        },
        addNewRow() {
            this.handleDataAdd();
        },
        handleDataAdd() {
            if (
                this.formData.kingBaseReceiptConditionDetailEntities ==
                undefined
            ) {
                this.formData.kingBaseReceiptConditionDetailEntities = [];
            }
            this.formData.kingBaseReceiptConditionDetailEntities.push(this.obj);
        },
        handleDataDelete(index, row, type) {
            this.$confirm("请确认是否要删除此行？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.formData.kingBaseReceiptConditionDetailEntities.splice(
                        index,
                        1
                    );
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        resetForm() {
            this.$refs["elForm"].resetFields();
        },
    },
};
</script>
<style></style>
